<template>
  <div class="left left_center left_center_width">
    <div class="left_toptitle">
      <span style="color: #fff;">空气质量重点监控统计</span>
      <span></span>
    </div>
    <el-select v-model="value" placeholder="请选择">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <div class="left_center_content">
      <div class="zhucharts"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    this.getzhucharts();
  },
  data() {
    return {
      value: "沈阳市",
      options: [
        { lable: "沈阳市", value: "沈阳市" },
        { lable: "铁岭市", value: "铁岭市" }
      ]
    };
  },
  methods: {
    getzhucharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector(".zhucharts"));
      var valdata = [66, "51μg/m", "85%", "15%"];
      var myColor = ["#fccf0b", "#fccf0b", "#1bc88d", "#f15656"];
      var option = {
        //图标位置
        grid: {
          top: "10%",
          left: "5%",
          bottom: "0",
          right: "25%"
        },
        xAxis: {
          show: false
        },
        yAxis: [
          {
            show: true,
            data: [
              "AQI年累计",
              "PM2.5年均浓度",
              "优良天数占比",
              "重污染天数占比"
            ],
            inverse: true,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: "#333333",
              show: true,
              verticalAlign: "bottom",
              align: "left",
              padding: [0, 0, 10, 20],
              textStyle: {
                color: "#333333",
                fontSize: "12"
              }
              // rich: {
              // lg: {
              //     backgroundColor: "#339911",
              //     color: "#fff",
              //     borderRadius: 15,
              //     // padding: 5,
              //     align: "center",
              //     width: 15,
              //     height: 15
              // }
              // }
            }
            // axisLabel: {
            //     show: true,
            //      verticalAlign: 'bottom',
            //         align: 'left',
            //         padding: [0, 0, 40, 40],
            //         textStyle: {
            //             color: '#FFFFFF',
            //             fontSize: '16',
            //         }
            // },
          },
          {
            show: true,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            inverse: true,
            data: valdata,
            axisLabel: {
              textStyle: {
                fontSize: 14,
                color: "#FCCF0B"
              }
            }
          }
        ],
        series: [
          {
            name: "条",
            type: "bar",
            yAxisIndex: 0,
            data: [66, 51, 85, 15],
            barCategoryGap: 50,
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 20,
                color: function(params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                }
              }
            }
          },
          {
            name: "框",
            type: "bar",
            yAxisIndex: 1,
            barCategoryGap: 50,
            data: [100, 100, 100, 100],
            barWidth: 15,
            itemStyle: {
              normal: {
                color: "none",
                borderColor: "#DDDDDD",
                borderWidth: 2,
                barBorderRadius: 15
              }
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
/* .el-select {
  top: 2rem;
  right: 0.125rem;
} */
.zhucharts {
  height: 2.875rem;
  width: 100%;
}
.left_center_content {
  width: 100%;
  height: 2.8125rem;
  background-color: #fff;
  padding-bottom: .0625rem;
}
.left_center_width {
  height: 3.35rem;
}
</style>
